<template>
  <el-dialog
    v-model="dialogStore.dialogs.equipMng.visible"
    title="设备详情"
    width="60%"
    :close-on-click-modal="false"
    @close="dialogStore.closeDialog('equipMng')"
  >
    <div class="device-detail" v-if="device">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="设备名称">{{ device.name }}</el-descriptions-item>
        <el-descriptions-item label="设备类型">{{ device.type }}</el-descriptions-item>
        <el-descriptions-item label="平台高度">{{ device.height }}</el-descriptions-item>
        <el-descriptions-item label="数量">{{ device.quantity }}台</el-descriptions-item>
        <el-descriptions-item label="日租单价">￥{{ device.dailyPrice }}/天</el-descriptions-item>
        <el-descriptions-item label="月租单价">￥{{ device.monthlyPrice }}/月</el-descriptions-item>
        <el-descriptions-item label="设备状态">
          <el-tag :type="getStatusType(device.status)">{{ device.status }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="添加时间">2024-07-01 10:30:00</el-descriptions-item>
        <el-descriptions-item label="设备规格" :span="2">{{ device.specifications }}</el-descriptions-item>
        <el-descriptions-item label="备注信息" :span="2">{{ device.remarks }}</el-descriptions-item>
      </el-descriptions>

      <div class="rental-records" style="margin-top: 20px;">
        <h3>租赁记录</h3>
        <el-table :data="rentalRecords" style="width: 100%; margin-top: 10px;">
          <el-table-column prop="customer" label="客户名称" />
          <el-table-column prop="startDate" label="开始日期" />
          <el-table-column prop="endDate" label="结束日期" />
          <el-table-column prop="amount" label="租金金额" />
          <el-table-column prop="status" label="状态">
            <template #default="{ row }">
              <el-tag :type="row.status === '已完成' ? 'success' : 'warning'">
                {{ row.status }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogStore.closeDialog('equipMng')">关闭</el-button>
        <el-button type="primary" @click="editDevice">编辑设备</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import { computed } from 'vue'
import { usePageDialogStore } from '@/store/pageDialogs'

export default {
  name: 'EquipDetailDialog',
  setup() {
    const dialogStore = usePageDialogStore()
    
    const device = computed(() => dialogStore.dialogs.equipMng.data)
    
    const rentalRecords = [
      {
        customer: '威龙建筑公司',
        startDate: '2024-07-01',
        endDate: '2024-07-15',
        amount: '3000.00',
        status: '已完成'
      },
      {
        customer: '星星工程有限公司',
        startDate: '2024-07-20',
        endDate: '2024-08-05',
        amount: '5600.00',
        status: '进行中'
      }
    ]
    
    const getStatusType = (status) => {
      const typeMap = {
        '可租赁': 'success',
        '已租出': 'warning',
        '维修中': 'danger',
        '停用': 'info'
      }
      return typeMap[status] || 'info'
    }
    
    const editDevice = () => {
      console.log('编辑设备:', device.value)
      // 这里可以跳转到编辑页面或打开编辑弹窗
    }
    
    return {
      dialogStore,
      device,
      rentalRecords,
      getStatusType,
      editDevice
    }
  }
}
</script>

<style scoped>
.device-detail {
  padding: 10px 0;
}

.rental-records h3 {
  color: #333;
  font-size: 16px;
  margin-bottom: 10px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style>
